<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="index.css">
    <!-- <style>
      div{
        justify-content: space-between;
      }
    </style> -->
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li>主页</li>
            <li>排行榜</li>
            <li>联系方式</li>
        </ul>
    </nav>
    <!-- 头部内容 -->
    <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
    </header>
    <!-- 主题内容 -->
    <div class="container">
        <!-- 左盒子 -->
        <aside>
            <!-- 五个按钮 -->
            <button id="add-user">添加账户</button>
            <button id="double">资金翻倍</button>
            <button id="show-millionaire">查询百万富翁</button>
            <button id="sort">财富榜</button>
            <button id="calculate">计算总额</button>
        </aside>
        <!-- 右盒子 -->
        <main id="main">
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
        </main>
    </div>

    <script>
        let dataInfo = [{
            name: "安东尼 戴维斯",
            money: 892001
        }, {
            name: "凯里 欧文",
            money: 668932
        }, {
            name: "史蒂夫 库里",
            money: 698756
        }, {
            name: "德里克 罗斯",
            money: 492489
        }, {
            name: "保罗 乔治",
            money: 853957
        }, {
            name: "勒布朗 詹姆斯",
            money: 968472
        }, {
            name: "詹姆斯 哈登",
            money: 718225
        }, {
            name: "凯文 杜兰特",
            money: 889147
        }, ];
        let h2 = document.querySelector('main>h2');
        // console.log(h2);
        let main = document.getElementById('main')
        let addUser = document.getElementById('add-user');
        let index = 0;
        let double = document.getElementById('double');
        let showMillionaire = document.getElementById('show-millionaire')
        let sort = document.getElementById('sort')

        // 添加账户
        addUser.onclick = function() {
            if (index < dataInfo.length) {
                let newDiv = document.createElement("div");
                newDiv.classList.add('newDS')

                newDiv.innerHTML = `<span>${dataInfo[index].name}</span><span>$${dataInfo[index].money}</span>`
                main.appendChild(newDiv)
                index++;
            }
        }

        // 资金翻倍
        double.onclick = function() {
            let newDS = document.querySelectorAll(".newDS");
            // console.log(newDS);
            newDS.forEach(function(item) {
                console.log(item.lastChild.innerHTML.slice(1) * 2);
                item.lastChild.innerHTML = `$${item.lastChild.innerHTML.slice(1) * 2}`

            })
        }

        // 查询百万富翁
        showMillionaire.onclick = function() {
            let newDS = document.querySelectorAll(".newDS");
            newDS.forEach(function(item) {
                let money = item.lastChild.innerHTML.slice(1)
                if (money > 1000000) {
                    main.appendChild(item)
                } else {
                    item.remove("")
                }
            })
        }

        // 财富榜
        sort.onclick = function() {
            let newDS = document.querySelectorAll(".newDS");
            console.log(newDS);
            let dataArr = [];
            newDS.forEach(function(item) {
                let money = item.lastChild.innerHTML.slice(1);
                // console.log(item);
                dataArr.push(money);
                // console.log(dataArr);
                dataArr.sort(function(a, b) {
                    return b - a
                });
                // console.log(dataArr);
            });
            console.log(dataArr);
        }
    </script>
</body>

</html>